<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title>${live.title}</title>
    <meta name="keywords" content="">
    <meta name="description" content="小直播——直播分享">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" href="/resources/asl/yijing/lib/weui.min.css">
    <link rel="stylesheet" href="/resources/asl/yijing/lib/jquery-weui.css">
    <link rel="stylesheet" href="/resources/asl/yijing/lib/animate.min.css">
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.0.2/weui.min.css">
    <link rel="stylesheet" href="/resources/asl/yijing/lib/live/css/mobile.css">
    <style>

        .danmuTag{
            z-index: 10000;
            width: 250px;
            background: #565656;
            height: 50px;
            border-radius: 30px;
            margin-left: 10px;
            filter:alpha(Opacity=70);
            -moz-opacity:0.7;
            opacity: 0.7;
            display: none;
            margin-top: 5px;
        }
        .danmuTag .headPic{
            width: 50px;
            height: 50px;
            border-radius: 30px;
            border: 0px;
            float: left;
        }
        #danmu .name{
            float: left;
            margin-top: 5px;
            margin-left: 10px;
            color: #ffffff;
            width: 130px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        #danmu .msg{
            float: left;
            margin-top: 0px;
            margin-left: 10px;
            color: #ffffff;
            width: 130px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        #danmu .image{
            width: 55px;
            float: right;
            margin-top: -25px;
        }
        #danmu .image img{
            width: 55px;
            height: 55px;
        }
        .movin-div div{
            width:100%;height:100%;left:0;top:0;background-color:none;position:absolute;z-index:100;
        }

    </style>
</head>
<body>
<div id="j-video-page" class="video-page" style="display: block">
    <!--视频部分 start-->
    <div id="PlayerContainer" class="video-play">

    </div>
    <!--视频部分 end-->

    <!--聊天部分 start-->
    <div class="video-pane">
        <div class="video-pane-head">
            <div class="video-pane-info">
                <div class="video-info">
                    <div class="user-img j-user-avatar">
                    </div>
                    <div class="user-info-text">
                        <div class="user-info-name j-user-name">&nbsp;</div>
                        <div class="user-info-num">
                            <i class="user-icon-fans"></i><span id="user-icon-fans">${live.watchCount}</span>
                            <#--<i class="user-icon-like"></i><span id="user-icon-like">0</span>-->
                        </div>
                    </div>
                </div>
            </div>
            <a class="j-btn-logout btn btn-logout" style="display: none;">退出</a>
        </div>
        <div class="video-pane-body">
            <div class="video-discuss">
                <ul class="video-sms-list" id="video_sms_list">

                </ul>
                <div class="video-discuss-pane">
                    <div class="pane-login" id="j-pane-login" style="display: none">
                        <!--<span class="like-icon zoomIn green"></span>-->
                        <a class="btn video-discuss-login j-btn-login" style="display: none">用户登录</a>
                        <a class="btn video-discuss-anologin j-btn-anologin" style="display: none">游客登录</a>
                    </div>
                    <div class="video-discuss-tool" id="video-discuss-tool" style="display: none">
                        <!--<span class="like-icon zoomIn green"></span>-->
                        <a class="video-discuss-sms j-btn-sms"></a>
                        <#--<a class="video-discuss-product " href="javascript:void(0)"></a>-->
                        <#--<a class="video-discuss-gift " href="javascript:void(0)"></a>-->
                        <a class="video-discuss-like j-btn-like"></a>
                    </div>
                    <div class="video-discuss-form" id="video-discuss-form" style="display: none">
                        <input type="text" class="video-discuss-input" id="send_msg_text">
                        <!--<a class="video-discuss-face j-btn-show-emotion"></a>-->
                        <button class="video-discuss-button j-btn-send-msg">发送</button>
                    </div>
                    <div class="video-discuss-emotion" id="video-discuss-emotion" style="display: none">
                        <div class="video-emotion-pane">
                            <ul id="emotionUL">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--聊天部分 end-->
</div>
<div id="danmu" style="top: 100px;margin-top: 25%">
    <div class="danmuTag">
        <img class="headPic" src="" />
        <div class="name" ></div>
        <div class="msg"></div>
    </div>
</div>
<div id="movin-div" class="movin-div">

</div>

<script type="text/javascript" src="/resources/asl/yijing/lib/live/js/lib.js"></script>
<!--引入webim sdk-->
<script type="text/javascript" src="/resources/asl/yijing/lib/live/sdk/webim.js"></script>
<script type="text/javascript" src="/resources/asl/yijing/lib/live/sdk/json2.js"></script>
<script type="text/javascript" src="/resources/asl/yijing/lib/live/sdk/bodymovin.js"></script>

<!--TLS web sdk(只用于托管模式，独立模式不用引入)-->
<script type="text/javascript" src="https://tls.qcloud.com/libs/api.min.js"></script>
<!--encrypt.min.js 只在需要直接调用访客登录接口时需要引用-->
<script type="text/javascript" src="https://tls.qcloud.com/libs/encrypt.min.js"></script>

<script type="text/javascript" src="/resources/asl/yijing/lib/jquery-2.1.4.js"></script>
<script type="text/javascript" src="/resources/asl/yijing/lib/live/js/jquery.danmu.js"></script>

<script>

    var hboxs_nickName = '匿名';
    var hboxs_headPic = '/resources/asl/yijing/lib/live/img/default_avator.png';
    var hboxs_liveId = '${live.id}';

</script>

<!--webim demo js-->
<script type="text/javascript" src="/resources/asl/yijing/lib/live/js/base.js"></script>
<script type="text/javascript" src="/resources/asl/yijing/lib/live/js/config.js"></script>
<script type="text/javascript" src="/resources/asl/yijing/lib/live/js/xzb.js"></script>

<!-- 微信和手Q 二次分享组件 -->
<script type="text/javascript">
    if(UA.wx){
        document.write('<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"><\/script>');
    }else if(UA.qq){
        document.write('<script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"><\/script>');
    }
</script>


</body>
</html>